<template>
	<view class="container columnY">
		<u-navbar leftIconColor="#fff" bgColor="transparent" :autoBack="true"></u-navbar>
		<view class="pad-left-right-80  pad-top-52 centerX columnY login-content">
			<view class="form-box">
				<view class="mar-top-bottom-6 text-center">
					<view class="font-36 name color-white">注册新用户</view>
				</view>
				<view class="centerXY mar-top-60">
					<image class="logo" src="../../static/image/logo.png" mode="logo"></image>
				</view>
				
				<view>
					<u--form labelPosition="top" :model="userInfo" ref="form1" labelWidth="130" :labelStyle="{color: '#fff',marginBottom:'30rpx'}">
						<u-form-item label="" prop="tel" borderBottom="true">
							<u--input color="#fff" autocomplete="off" type="number" clearable placeholderClass="input-style"
								placeholder="请输入手机号" v-model.number="userInfo.tel" border="none"></u--input>
						</u-form-item>
						<u-form-item prop="sms_code" class="mar-top-40" borderBottom="true">
							<u-input color="#fff" type="number" clearable placeholderClass="input-style" placeholder="请输入验证码"
								v-model="userInfo.sms_code" border="none">
								<template slot="suffix">
									<text v-if="codeTime == 60" @click="hanldePostCode"
										class="font-24 color-white">获取验证码</text>
									<text v-else class="font-24 color-white">{{codeText}}</text>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item prop="invite_code" class="mar-top-40" borderBottom="true">
							<u--input color="#fff" clearable placeholderClass="input-style" placeholder="请输入邀请码（选填）"
								v-model="userInfo.invite_code" border="none"></u--input>
						</u-form-item>
						
						<u-form-item v-show="showPassword === true" prop="login_secret" class="mar-top-40" borderBottom="true">
							<u-input color="#fff" :password="false" clearable placeholderClass="input-style"
								placeholder="请设置密码" v-model="userInfo.login_secret" border="none">
								<template slot="suffix">
									<u-icon color="#999" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
								</template>
							</u-input>
						</u-form-item>
						
						<u-form-item v-show="showPassword === false" prop="login_secret" class="mar-top-40" borderBottom="true">
							<u-input color="#fff" :password="true" clearable placeholderClass="input-style"
								placeholder="请设置密码" v-model="userInfo.login_secret" border="none">
								<template slot="suffix">
									<u-icon color="#999" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
								</template>
							</u-input>
						</u-form-item>
						
						
					</u--form>
					<view class="betweenX action font-24 color-white">
						<view>密码内需同时包含数字、字母，长度在6-12之间</view>
					</view>

					<u-button throttleTime="500" class="mar-top-96 font-32 login-button"
						@click="$u.debounce(submit,500)">立即注册</u-button>
						<agreement class="mar-top-30" @hanldeCheckbox="hanldeCheckbox" :checkbox="checkbox"></agreement>
				</view>
			</view>
		</view>
	

		<my-popup title="恭喜您" content="注册成功" confirmText="去登录" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		postSend,
		regByTel
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 注册信息
				userInfo: {
					tel: '',
					sms_code: '',
					invite_code: '',
					login_secret: ''
				},
				// 倒计时时间
				codeTime: 60,
				// 定时器
				inter: null,
				// 倒计时文字
				codeText: '',
				// 查看密码
				showPassword: false,
				// 用户协议
				checkbox: false,
				// 注册成功弹窗
				isPopup: false,
			}
		},
		onLoad(code) {
			this.userInfo.invite_code = code.code
		},
		methods: {
			// 提交注册
			submit() {
				if (this.userInfo.tel == '') {
					uni.$u.toast('手机号不能为空')
					return
				}
				if (!/^1[23456789]\d{9}$/.test(this.userInfo.tel)) {
					uni.$u.toast('手机号格式不正确')
					return
				}
				if (this.userInfo.sms_code == '') {
					uni.$u.toast('验证码不能为空')
					return
				}
				let pwd = this.userInfo.login_secret;
				let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
				if (!reg.test(pwd) || pwd.length < 6 || pwd.length > 12) {
					uni.$u.toast('密码格式不正确')
					return
				}
				if (!this.checkbox) {
					uni.$u.toast('请先勾选用户协议')
					return
				}

				// 提交注册
				regByTel(this.userInfo).then(res => {
					this.isPopup = true;
				})
			},
			// 去登录
			hanldeConfirm() {
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			// 勾选协议
			hanldeCheckbox() {
				this.checkbox = !this.checkbox;
			},
			// 查看密码
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			// 获取验证码
			hanldePostCode() {

				if (this.userInfo.tel == '') {
					uni.$u.toast('手机号不能为空')
					return
				}
				if (!/^1[23456789]\d{9}$/.test(this.userInfo.tel)) {
					uni.$u.toast('手机号格式不正确')
					return
				}
				let data = {
					tel: this.userInfo.tel,
					scene: 'user_register'
				}

				uni.showLoading({
					title: '发送中...'
				})
				postSend(data).then(res => {
					uni.hideLoading();
					uni.$u.toast(res.msg);
					clearInterval(this.inter);
					this.codeTime -= 1
					this.codeText = `${this.codeTime}秒重新获取`;
					this.inter = setInterval(() => {
						this.codeTime -= 1
						this.codeText = `${this.codeTime}秒重新获取`;
						// 倒计时完成
						if (this.codeTime <= 0) {
							this.codeTime = `获取验证码`;
							this.codeTime = 60;
							clearInterval(this.inter);
						}
					}, 1000);
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		background: url('../../static/image/login-bg.png') no-repeat;
		background-color: #000000;
		background-size: 100% 100%;
		min-height: 100vh;

		.login-content {
			flex-grow: 1;
		}

		.logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 40rpx;
		}

		.title {
			font-weight: 600;
		}

		.name {
			font-weight: 600;
		}

		.form-box {
			width: 100%;
		}

		.action {
			height: 80rpx;
			line-height: 80rpx;
		}

		.login-button {
			background: linear-gradient(90deg, #972AE6 0%, #626FBF 100%);
			box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
			height: 96rpx;
			color: white;
			border-radius: 50rpx;
			border: 0 none;
		}

		.register_btn {
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>